<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5案例页面</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .contianer {
            width: 100vw;
            background-color: #f4f4f4;
            padding-bottom: 63px;
            padding-top: 100px;
        }

        .top {
            width: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        .nav {
            width: 100%;
            height: 44px;
            background-color: white;
            box-sizing: border-box;
            padding: 15px 15px 12px 21px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav_right img {
            vertical-align: middle;
        }

        .nav_right img:nth-of-type(1) {
            width: 17px;
            height: 11px;
        }

        .nav_right img:nth-of-type(2) {
            width: 15px;
            height: 12px;
        }

        .nav_right img:nth-of-type(3) {
            width: 22px;
            height: 15px;
        }

        .tab {
            width: 100%;
            height: 50px;
            background-color: white;
            padding: 8px 141px 20px 30px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .tab p {
            font-family: PingFangSC-Regular;
            font-size: 16px;
        }

        .tab p.active {
            font-weight: bold;
            border-bottom: 4px solid red;
            padding-bottom: 2px;
            border-radius: 3px;
        }

        .list {
            width: 100%;
        }

        .list .row {
            width: 100%;
            height: 230px;
            padding: 0 15px;
            box-sizing: border-box;
            margin-top: 15px;
        }

        .list .row .info {
            width: 100%;
            height: 100%;
            background-color: white;
            border-radius: 10px;
            padding: 15px 17px 20px 20px;
            box-sizing: border-box;
        }

        .info .info_top {
            width: 100%;
            height: 20px;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .info .info_top p {
            font-size: 16px;
            font-weight: bold;
        }

        .info .info_top button {
            width: 52px;
            height: 22px;
            border-radius: 11px;
            background: none;
            border: 1px solid red;
            font-size: 12px;
            color: red;
        }

        .info .info_main {
            height: 95px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding-bottom: 20px;
            box-sizing: border-box;
            border-bottom: 2px solid #f4f4f4;
        }

        .info_main .info_main_top {
            display: flex;
        }

        .info_main .info_main_bottom {
            display: flex;
        }

        .info_main img {
            width: 22px;
            height: 22px;
        }

        .info_main span {
            color: #818181;
            font-size: 14px;
            margin-left: 15px;
        }

        .info .info_bottom {
            margin-top: 20px;
            width: 100%;
            height: 40px;
            /* border: 1px solid red; */
            display: flex;
            justify-content: space-between;
        }

        .info_bottom .info_bottom_left {
            /* width: 117px; */
            height: 40px;
            display: flex;
            flex-direction: column;
        }

        .info_bottom .info_bottom_left span:nth-of-type(1) {
            color: #818181;
        }

        .info_bottom .info_bottom_left span {
            font-size: 14px;
        }

        .info_bottom button {
            width: 80px;
            height: 32px;
            border-radius: 16px;
            background-color: #EF4F3F;
            color: white;
            border: none;
        }

        .tabbar {
            width: 100%;
            height: 48px;
            display: flex;
            justify-content: space-evenly;
            position: fixed;
            left: 0;
            bottom: 0;
            background-color: white;
            padding: 5px 0;
        }

        .tabbar .tabItem {
            width: 20px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            /* align-items: center; */
        }

        .tabbar.tabItem img {
            width: 20px;
            height: 21px;
        }

        .tabbar .tabItem span {
            font-size: 10px;
            color: #818181;
        }
    </style>
</head>

<body>
    <div class="contianer">
        <div class="top">
            <div class="nav">
                <span class="nav_left">9:41</span>
                <div class="nav_right">
                    <img src="./imgs/xinhao.png" alt="">
                    <img src="./imgs/wifi.png" alt="">
                    <img src="./imgs/dianchi.png" alt="">
                </div>
            </div>
            <div class="tab">
                <p class="active">待提货</p>
                <p>在途</p>
                <p>已完成</p>
            </div>
        </div>
        <!-- <div style="height: 100px;"></div> -->
        <div class="list">
            <div class="row">
                <div class="info">
                    <div class="info_top">
                        <p>任务编号:XAHH1234567</p>
                        <button>已延迟</button>
                    </div>
                    <div class="info_main">
                        <div class="info_main_top">
                            <img src="./imgs/start.png" alt="">
                            <span>北京市昌平区</span>
                        </div>
                        <div class="info_main_bottom">
                            <img src="./imgs/end.png" alt="">
                            <span>北京市昌平区</span>
                        </div>
                    </div>
                    <div class="info_bottom">
                        <div class="info_bottom_left">
                            <span>提货时间</span>
                            <span>2022.05.04 13:00-14:00</span>
                        </div>
                        <button>提货</button>
                    </div>
                </div>
            </div>
            <!-- <div class="row">
                <div class="info">
                    <div class="info_top">
                        <p>任务编号:XAHH1234567</p>
                        <button>已延迟</button>
                    </div>
                    <div class="info_main">
                        <div class="info_main_top">
                            <img src="./imgs/start.png" alt="">
                            <span>北京市昌平区</span>
                        </div>
                        <div class="info_main_bottom">
                            <img src="./imgs/end.png" alt="">
                            <span>北京市昌平区</span>
                        </div>
                    </div>
                    <div class="info_bottom">
                        <div class="info_bottom_left">
                            <span>提货时间</span>
                            <span>2022.05.04 13:00-14:00</span>
                        </div>
                        <button>提货</button>
                    </div>
                </div>
            </div> -->
        </div>
        <div class="tabbar">
            <div class="tabItem">
                <img src="./imgs/renwu.png" alt="">
                <span>任务</span>
            </div>
            <div class="tabItem">
                <img src="./imgs/msg.png" alt="">
                <span>消息</span>
            </div>
            <div class="tabItem">
                <img src="./imgs/my.png" alt="">
                <span>我的</span>
            </div>
        </div>
    </div>
    <script>
        let tabs = document.querySelectorAll('.tab p')
        tabs.forEach(item => {
            item.addEventListener('click', function () {
                tabs.forEach(m => m.className = "")
                this.className = "active"
            })
        })

        const getData = () => {
            let list = localStorage.getItem('list') || "[]"
            return JSON.parse(list)
        }
        const render = data => {
            let str = data.map((item, index) => {
                return `<div class="row">
                    <div class="info">
                        <div class="info_top">
                            <p>任务编号:${item.number}</p>
                            <button>${item.status}</button>
                        </div>
                        <div class="info_main">
                            <div class="info_main_top">
                                <img src="./imgs/start.png" alt="">
                                <span>${item.start}</span>
                            </div>
                            <div class="info_main_bottom">
                                <img src="./imgs/end.png" alt="">
                                <span>${item.end}</span>
                            </div>
                        </div>
                        <div class="info_bottom">
                            <div class="info_bottom_left">
                                <span>提货时间</span>
                                <span>${item.time}</span>
                            </div>
                            <button data-id="${index}" onclick=send(this)>提货</button>
                        </div>
                    </div>
                </div>`
            }).join('')
            document.querySelector('.list').innerHTML = str
        }

        if (getData().length > 0) {
            render(getData())
        } else {
            let data = [
                {
                    number: "XAHH1234567",
                    status: "已延迟",
                    start: "北京昌平区马池口镇",
                    end: "北京朝阳区大悦城",
                    time: "2022.05.04 13:00-15:00"
                },
                {
                    number: "XAHH1234567",
                    status: "已延迟",
                    start: "北京昌平区马池口镇",
                    end: "北京朝阳区大悦城",
                    time: "2022.05.04 13:00-15:00"
                },
                {
                    number: "XAHH1234567",
                    status: "已延迟",
                    start: "北京昌平区马池口镇",
                    end: "北京朝阳区大悦城",
                    time: "2022.05.04 13:00-15:00"
                },
                {
                    number: "XAHH1234567",
                    status: "已延迟",
                    start: "北京昌平区马池口镇",
                    end: "北京朝阳区大悦城",
                    time: "2022.05.04 13:00-15:00"
                },
            ]
            localStorage.setItem('list', JSON.stringify(data))
        }

        const send = (e) => {
            console.log(1)
            console.log(e)
            e.style.opacity = 0.5
            e.disabled = true
        }

    </script>
</body>

</html>